<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
    <link rel="stylesheet" href="../../css/orderitem.css">
    <link rel="stylesheet" href="../../css/orderinfo.css">
    <style>
        .pay-type {
            line-height: 1.5rem;
            height: 6rem;
            margin-bottom: 0.2rem;
        }

        .pay-type .pay-type-item {
            display: flex;
            justify-content: space-between;
        }

        .pay-type .pay-icon {
            display: inline-block;
            width: 2.2rem;
            vertical-align: middle;
            line-height: 1.5rem;
            padding-left: 1.2rem;
        }

        .pay-type .pay-right {
            margin-right: 0.2rem;
        }

        .pay-box {
            position: fixed;
            bottom: 0;
            background-color: #fff;
            line-height: 2.5rem;
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .pay-box .pay-btn {
            width: 6rem;
            background-color: #e02e24;
            color: #fff;
            text-align: center;
        }

        .pay-box .pay-tips {
            font-size: 0.6rem;
            color: #151516;
        }

        .pay-box .pay-amount {
            color: #e02e24;
            font-size: 0.8rem;
            padding-right: 0.6rem;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav">
        <a class="aui-pull-left aui-btn" onclick="closewin();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">订单详情</div>
    </header>
    <div id="order-box" v-cloak>
        <div id="header" class="aui-bar aui-bar-nav aui-padded-t-10" style=" line-height: 4rem;background-color: #e02e24;">
            <div class="aui-pull-left aui-padded-l-5 status-title">{{orderdetail.tiptxt}}</div>
            <div class="aui-pull-right status-logo"><i class="aui-iconfont aui-icon-cert "></i></div>
        </div>
        <div class="aui-content bg-white aui-margin-b-5">
            <div class="address-info"><i class="aui-iconfont aui-icon-location"></i>
                <div class="address-detail">
                    <div>{{orderdetail.recv_uname}} {{orderdetail.recv_mobile}}</div>
                    <div>{{orderdetail.recv_address}}</div>
                </div>
            </div>
        </div>

        <div class="aui-content pinuser-box bg-white">
            <div class="pin-title-box"><i></i>
                <span class="pin-title">{{orderdetail.tiptxt}}</span> ({{orderdetail.needpersonnum}}人团<span v-if="orderdetail.leftuser">,差{{orderdetail.leftuser}}个</span>)
            </div>
            <div class="aui-row pinusers">
                <ul>
                    <li class="user-item" v-for="item in orderdetail.userlist">
                        <i class="icon-bg">
                <img   :data-url="item.logo_url" onload="fnLoadImage(this)" src="../../image/default_user_logo.png" >
           </i>
                    </li>


                </ul>
            </div>
        </div>

        <div class="aui-content bg-white">
            <div class="order-item">
                <div class="shop-item bg-white">
                    <div class="shop-title"><img :src="orderdetail.shop_logo_url" class="shoplogo"><span>{{orderdetail.shop_title}}</span></div>
                </div>
                <div class="product">
                    <div class="product-logo-title">
                        <img :src="orderdetail.product_tumbpic_url" class="product-logo">
                        <div class="product-title">
                            <div class="product-titled">{{orderdetail.product_title}}</div>
                            <p>{{orderdetail.product_sku}}</p>
                        </div>
                    </div>

                    <div class="price-and-num">
                        <div class="product-price">￥{{orderdetail.product_price/100}}</div>
                        <div class="product-num">x{{orderdetail.product_num}}</div>
                    </div>
                </div>
                <div class="pay-info bg-white">
                    实付: ￥{{orderdetail.pay_amount/100}}<span v-if="orderdetail.coupon_id>0">(优惠券-{{orderdetail.coupon_amount/100}}元)</span>
                </div>
                <div class="productbtn bg-white" v-if="orderdetail.pay_status==1">
                    <span v-if="orderdetail.status==1" @click="openwuliu">物流信息</span>
                    <span v-if="orderdetail.activity_flag=='lottery'" @click="goactivity">{{actmap[orderdetail.activity_flag]}}</span>
                    <span v-if="orderdetail.status==1" @click="gocomment">{{cmtmap[orderdetail.comment_status]}}</span>
                </div>

            </div>

        </div>


        <div class="aui-content bg-white  aui-margin-b-10">
            <div class="contact-box ">
           <span class="contact-btn" @click='openshare'> <i class="aui-iconfont aui-icon-wechat"></i> 分享好友 </span>
                <span class="contact-btn"><i class=" aui-iconfont aui-icon-phone" ></i> <a :href="'tel:'+orderdetail.shop_mobile">联系卖家</a></span>
            </div>
        </div>

        <div class="aui-content order-box bg-white aui-margin-b-10">
            <ul>
                <li class="order-item">订单编号：<span>{{orderdetail.orderno}}</span></li>
                <li class="order-item">支付方式：<span>{{paymap[orderdetail.pay_type]}}</span></li>
                <li class="order-item">下单时间：<span>{{orderdetail.create_time_fmt}}</span></li>
            </ul>

        </div>
        <div class="pay-type " v-if="orderdetail.pay_status==0">
            <ul class="bg-white">
                <li class="pay-type-item" v-for="item in paytype_list" @click="changepaytype(item)">
                    <div><img :src="item.icon" class="pay-icon"> {{item.name}} </div>
                    <div class="pay-right"><span :class="pay_type==item.pay_type ? 'aui-iconfont aui-icon-correct' : ''"></span></div>
                </li>


            </ul>
            <div class="pay-box aui-content" @click="payorder">
                <span class="pay-tips">实付款</span>
                <span class="pay-amount">￥{{orderdetail.pay_amount/100}}</span>
                <span class="pay-btn">立即支付</span>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#order-box',
            data: {
                sharestatus:false,
                paytype_list: [{
                    'name': '微信支付',
                    'pay_type': 'weixin',
                    'icon': '../../image/pay_icon_wexin.png'
                }, {
                    'name': '测试支付',
                    'pay_type': 'testpay',
                    'icon': '../../mobile/image/pay_icon_wexin.png'
                }, ],
                token: '',
                orderid: '',
                orderdetail: {},
                actmap: {
                    'lottery': '幸运用户',
                    'help': '助力详情',
                    'seckill': '秒杀用户',
                },
                cmtmap: {
                    0: '未评论',
                    1: '已评论'
                },
                paymap: {
                    'weixin': '微信',
                    'testpay': '测试支付'
                },
                pay_type: 'weixin',
                pay_param: {},

            },
            methods: {
             openshare:function(){
                  vm.sharestatus = !vm.sharestatus;
                  console.log(vm.sharestatus);
                if(vm.sharestatus){
                  $page.openfrm('product_share_frame','../product/share_frame.html',{x:0,y:0,w:api.winWidth,h:'auto'},{pagetype:'pinorder',id:vm.orderid});
                }else{
                  api.closeFrame({
                      name: 'product_share_frame'
                  });
                }
              },
                changepaytype: function(item) {
                    this.pay_type = item.pay_type;
                },
                openchat: function() {
                    $page.openwin('home_chat', './chat.html', {
                        touid: this.orderdetail.shop_uid
                    });

                },
                openwuliu: function() {
                    $page.openwin('home_wuliu', '../home/wuliu.html', {
                        id: this.orderid
                    });
                },
                goactivity: function() {
                    //活动详情,中奖名单
                    var acflag = this.orderdetail.activity_flag;
                    if (acflag === "lottery") {
                        $page.openwin('product_luckuser', '../product/luckuser.html', {
                            id: this.orderid
                        });
                    } else if (acflag === "help") { //分享助力

                    }
                },
                gocomment: function() {
                    //评论
                    if (!this.orderdetail.comment_status) {
                        $page.openwin("product_addcomment", '../product/addcomment.html', {
                            orderid: this.orderid,
                            product_id: this.orderdetail.product_id
                        });
                    }
                },
                payorder: function() { //重新支付

                    this.pay_param = {
                        orderid: this.orderid,
                        platform: 'app',
                    };
                    switch (this.pay_type) {
                        case 'weixin':
                            vm.weixinpay();
                            break;
                        case 'testpay':
                            vm.testpay();
                            break;
                    }

                },
                testpay: function() {
                    $page.get_data('/api/order/repay', 'post',
                        this.pay_param,
                        function(ret) {
                            if (ret.errno !== 1000) {
                                $page.toast(ret.errmsg);
                                return false;
                            } else {
                                $page.openwin('home_orderdetail', '../home/orderlist.html');

                            }

                        });
                },
                weixinpay:function(){


                   if (this.pay_type === "weixin") {
                       this.postparam.trade_type = 'APP';
                   }
                   $page.get_data('/api/order/repay', 'post',
                       this.pay_param,
                       function(ret) {
                           if (ret.errno !== 1000) {
                               $page.toast('异常('+ret.errmsg+')');
                                return false;
                           } else { //提交成功,跳转到订单详情页
                               var cfg = ret.data;
                               var wxPay = api.require('wxPay');
                               wxPay.payOrder({

                                   orderId: cfg.orderId,
                                   mchId: cfg.mchId,
                                   nonceStr: cfg.noceStr,
                                   timeStamp: cfg.timeStamp,
                                   package: cfg.package,
                                   sign: cfg.sign
                               }, function(ret, err) {
                                   console.log(JSON.stringify(ret));
                                   if (ret.status) {
                                            $page.openwin('home_orderdetail', '../home/orderlist.html');
                                       //支付成功
                                   } else {
                                      $page.toast('微信支付异常(code:'+err.code+')');

                                   }
                               });
                               console.log("createorder");
                           }
                       });
                  },

        load_init: function() {
            $page.get_data('/api/order/getDetail', 'post', {
                orderid: this.orderid,
                token: this.token
            }, function(ret) {
                vm.orderdetail = ret.data;
            });

        },
        }
        });
        apiready = function() {

            vm.token = $api.getStorage('token');
            var pageParam = api.pageParam;
            vm.orderid = pageParam.id;

            vm.load_init();
        }
    </script>
</body>

</html>
